<!doctype html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, user-scalable=yes, initial-scale=1.0, maximum-scale=3.0, minimum-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <meta name="apple-mobile-web-app-capable" content="yes">
  <meta name="apple-touch-fullscreen" content="yes">
  <meta name="format-detection" content="telephone=no,address=no">
  <meta name="apple-mobile-web-app-status-bar-style" content="white">
  <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
  <meta name="description" content="">
  <title>紫微斗数</title>
  <link rel="stylesheet" href="/static/ziwei/css/index.css?v=202411061208">
  <style>
      @font-face {
          font-family: 'ziwei';
          src: url('https://oss.goddessxzns.com/test/ziwei/font/iconfont.woff2?t=1727338928722') format('woff2'),
          url('https://oss.goddessxzns.com/test/ziwei/font/iconfont.woff?t=1727338928722') format('woff'),
          url('https://oss.goddessxzns.com/test/ziwei/font/iconfont.ttf?t=1727338928722') format('truetype');
      }

      .icon {
          font-family: "ziwei", serif !important;
          font-size: 16px;
          font-style: normal;
          -webkit-font-smoothing: antialiased;
          -moz-osx-font-smoothing: grayscale;
      }

      .icon-bgzh::before {
          content: "\e61b";
      }

      .icon-dghr::before {
          content: "\e61a";
      }

      .icon-shezhi::before {
          content: "\e619";
      }

      .icon-right::before {
          content: "\e61d";
      }

  </style>
</head>
<body>
<div class="ziwei theme-yellow">
  <div class="top">
    <div class="left">
      <div class="text">紫微 <span class="grey">（本命盘）</span></div>
    </div>
    <div class="right">
      <div class="list">
        <div class="list-item" id="chart-detail">
          <div class="text">参数</div>
        </div>
        <div class="list-item" id="chart-setting">
          <div class="text">设置</div>
          <div class="icon icon-shezhi"></div>
        </div>
      </div>
    </div>
  </div>
  <div class="middle">
    <table cellpadding="0" cellspacing="0" class="table">
      <tbody id="benming">
      {foreach [5, 6, 7, 8, 4, 9, 3, 10, 2, 1, 0, 11] as $k => $v}
      {if in_array($v, [2, 3, 4, 5], true)}
      <tr class="tr">
        {/if}
        <td class="td gong" id="gong-{$v}" data-index="{$v}" data-lu="{$gong[$v]['hualu']}" data-quan="{$gong[$v]['huaquan']}"
            data-ke="{$gong[$v]['huake']}" data-ji="{$gong[$v]['huaji']}">
          <div class="xing">
            {foreach $gong[$v]['xing'] as $v2}
            <div id="xing-{$v2.id}" class="star">
              <span class="mingzi {$v2.type}" style="">{$v2.name}</span>
              <span class="zhuangtai">{$v2.zhuangtai}</span>
              <span class="shegnniansihua{$v2.shengnian_sihua ? ' cur':''}">{$v2.shengnian_sihua}</span>
              {if $v2.zihua_lu === 1}
              <span class="huaru zihua-lu"></span>
              {/if}
              {if $v2.zihua_quan === 1}
              <span class="huaru zihua-quan"></span>
              {/if}
              {if $v2.zihua_ke === 1}
              <span class="huaru zihua-ke"></span>
              {/if}
              {if $v2.zihua_ji === 1}
              <span class="huaru zihua-ji"></span>
              {/if}
              {if $v2.huadui_lu === 1}
              <span class="huaru huadui-lu"></span>
              {/if}
              {if $v2.huadui_quan === 1}
              <span class="huaru huadui-quan"></span>
              {/if}
              {if $v2.huadui_ke === 1}
              <span class="huaru huadui-ke"></span>
              {/if}
              {if $v2.huadui_ji === 1}
              <span class="huaru huadui-ji"></span>
              {/if}
            </div>
            {/foreach}
          </div>
          <div class="nian">{$gong[$v]['nian']}</div>
          {if $gong[$v]['shishengong'] === 1}
          <div class="shishenggong">身宫</div>
          {/if}
          <div class="jichu">
            <div class="qita">
              <!--太岁十二神-->
              <div class="qitaxing">{$gong[$v]['taisui']}</div>
              <!--将前十二神-->
              <div class="qitaxing">{$gong[$v]['jiangqian']}</div>
              <!--博士十二神-->
              <div class="qitaxing">{$gong[$v]['boshi']}</div>
            </div>
            <div class="nianlingduan{$gong[$v]['shixianzai'] ? ' cur' : ''}">{$gong[$v]['nianlingduan']}</div>
            <div class="gongwei">{$gong[$v]['mingcheng']}</div>
            <div class="changsheng">{$gong[$v]['changsheng']}</div>
            <div class="gongganzhi">{$gong[$v]['gan']}{$gong[$v]['zhi']}</div>
          </div>
        </td>
        {if $v === 4}
        <td class="td" rowspan="2" colspan="2">
          <div class="mid-list">
            <div class="mid-list-item  geju">
              <span class="lab"><span class="name">姓名：{$info.name}</span>&nbsp;&nbsp;{$info.yinyang} {$info.wuxingju}</span>
            </div>
            {if !empty($info.shijian0)}
            <div class="mid-list-item ztys">
              <span class="lab">{$info.shijian0.name}</span>
              <span class="text">{$info.shijian0.value}</span>
            </div>
            {/if}
            <div class="mid-list-item ztys">
              <span class="lab">{$info.shijian.name}</span>
              <span class="text">{$info.shijian.value}</span>
            </div>
            <div class="mid-list-item nongli">
              <span class="lab">{$info.nongli.name}</span>
              <span class="text">{$info.nongli.value}</span>
            </div>
            <div class="mid-list-item">
              <span class="lab mingzhu">{$info.mingzhu.name}</span>
              <span class="text">{$info.mingzhu.value}</span>
              <span class="lab shenzhu">{$info.shenzhu.name}</span>
              <span class="text">{$info.shenzhu.value}</span>
              <span class="lab zidou">{$info.ziniandoujun.name}</span>
              <span class="text">{$info.ziniandoujun.value}</span>
            </div>
            <div class="mid-list-item">
              <span class="lab">本宫自化</span>
              <span class="text icon icon-bgzh"></span>
              <span class="lab">化入对宫</span>
              <span class="text icon icon-dghr"></span>
            </div>
            <div class="mid-list-item">
              <span class="lab ">四化颜色</span>
              <span class="text">
                <span class="lu"><span class="icon icon-right"></span>禄</span>
                <span class="quan"><span class="icon icon-right"></span>权</span>
                <span class="ke"><span class="icon icon-right"></span>科</span>
                <span class="ji"><span class="icon icon-right"></span>忌</span>
              </span>
            </div>
          </div>
        </td>
        {/if}
        {if in_array($v, [8, 9, 10, 11], true)}
      </tr>
      {/if}
      {/foreach}
      </tbody>
    </table>
  </div>
  <div class="bottom"></div>
  <div id="pop">
    <div class="mask"></div>
    <div class="content">
      <div class="title">
        <span class="text">设置</span>
        <span class="close"></span>
      </div>
      <div class="setting-list">
        <div class="list-item">
          <div class="line">
            <div class="label">真太阳时</div>
            <div class="label-content">
              <div class="input-radio input radio{if $setting.time_type==1} checked{/if}" data-name="time_type"
                   data-value="{$setting.time_type}"></div>
            </div>
          </div>
        </div>
        <div class="list-item">
          <div class="line">
            <div class="label">晚子时<span class="des">（23:00-00:00，计算为本日）</span></div>
            <div class="label-content">
              <div class="input-radio input radio{if $setting.time_start==1} checked{/if}" data-name="time_start"
                   data-value="{$setting.time_start}"></div>
            </div>
          </div>
        </div>
        <div class="list-item">
          <div class="line">
            <div class="label">飞星自化</div>
            <div class="label-content">
              <div class="input-radio input radio{if $setting.zihua==1} checked{/if}" data-name="zihua" data-value="{$setting.zihua}"></div>
            </div>
          </div>
        </div>
        <div class="list-item">
          <div class="line">
            <div class="label">四化</div>
          </div>
          <div class="sub-line">
            <div class="sub-label">甲</div>
            <div class="sub-label-content">
              <div class="input-checkbox">
                <div class="box-item input checkbox{if $setting.sihua_jia==0} checked{/if}" data-name="sihua_jia" data-value="0">廉破武阳</div>
                <div class="box-item input checkbox{if $setting.sihua_jia==1} checked{/if}" data-name="sihua_jia" data-value="1">廉破曲阳</div>
              </div>
            </div>
          </div>
          <div class="sub-line">
            <div class="sub-label">戊</div>
            <div class="sub-label-content">
              <div class="input-checkbox">
                <div class="box-item input checkbox{if $setting.sihua_wu==0} checked{/if}" data-name="sihua_wu" data-value="0">贪阴右机</div>
                <div class="box-item input checkbox{if $setting.sihua_wu==1} checked{/if}" data-name="sihua_wu" data-value="1">贪阴阳机</div>
              </div>
            </div>
          </div>
          <div class="sub-line">
            <div class="sub-label">庚</div>
            <div class="sub-label-content">
              <div class="input-checkbox">
                <div class="box-item input checkbox{if $setting.sihua_geng==0} checked{/if}" data-name="sihua_geng" data-value="0">阳武阴同
                </div>
                <div class="box-item input checkbox{if $setting.sihua_geng==1} checked{/if}" data-name="sihua_geng" data-value="1">阳武府同
                </div>
              </div>
            </div>
          </div>
          <div class="sub-line">
            <div class="sub-label">辛</div>
            <div class="sub-label-content">
              <div class="input-checkbox">
                <div class="box-item input checkbox{if $setting.sihua_xin==0} checked{/if}" data-name="sihua_xin" data-value="0">巨阳曲昌</div>
                <div class="box-item input checkbox{if $setting.sihua_xin==1} checked{/if}" data-name="sihua_xin" data-value="1">巨阳武昌</div>
              </div>
            </div>
          </div>
          <div class="sub-line">
            <div class="sub-label">壬</div>
            <div class="sub-label-content">
              <div class="input-checkbox">
                <div class="box-item input checkbox{if $setting.sihua_ren==0} checked{/if}" data-name="sihua_ren" data-value="0">梁紫左武</div>
                <div class="box-item input checkbox{if $setting.sihua_ren==1} checked{/if}" data-name="sihua_ren" data-value="1">梁紫府武</div>
              </div>
            </div>
          </div>
          <div class="sub-line">
            <div class="sub-label">癸</div>
            <div class="sub-label-content">
              <div class="input-checkbox">
                <div class="box-item input checkbox{if $setting.sihua_gui==0} checked{/if}" data-name="sihua_gui" data-value="0">破巨阴贪</div>
                <div class="box-item input checkbox{if $setting.sihua_gui==1} checked{/if}" data-name="sihua_gui" data-value="1">破巨阳贪</div>
              </div>
            </div>
          </div>
        </div>
        <div class="list-item">
          <div class="line">
            <div class="label">闰月</div>
          </div>
          <div class="sub-line">
            <div class="sub-label">闰月分界</div>
            <div class="sub-label-content">
              <div class="input-checkbox">
                <div class="box-item input checkbox{if $setting.runyue==0} checked{/if}" data-name="runyue" data-value="0">月中分隔</div>
                <div class="box-item input checkbox{if $setting.runyue==1} checked{/if}" data-name="runyue" data-value="1">隶属本月</div>
                <div class="box-item input checkbox{if $setting.runyue==2} checked{/if}" data-name="runyue" data-value="2">隶属下月</div>
              </div>
            </div>
          </div>
        </div>
        <div class="list-item">
          <div class="line">
            <div class="label">安星方法</div>
          </div>
          <div class="sub-line">
            <div class="sub-label">安魁钺法</div>
            <div class="sub-label-content">
              <div class="input-checkbox">
                <div class="box-item input checkbox{if $setting.an_kuiyue==0} checked{/if}" data-name="an_kuiyue" data-value="0">六辛逢马虎</div>
                <div class="box-item input checkbox{if $setting.an_kuiyue==1} checked{/if}" data-name="an_kuiyue" data-value="1">六辛逢虎马</div>
              </div>
            </div>
          </div>
        </div>
        <div class="list-item" style="border: none;">
          <div class="line">
            <div class="label">风格</div>
          </div>
          <div class="line" style="justify-content: left">
            <div class="input-checkbox2 checkbox chart-style checked" style="background-color: #eac387;" data-value="theme-yellow"></div>
            <div class="input-checkbox2 checkbox chart-style" style="background-color: #abd1e9;" data-value="theme-blue"></div>
            <div class="input-checkbox2 checkbox chart-style" style="background-color: #9dd7bb;" data-name="fengge"
                 data-value="theme-green"></div>
            <div class="input-checkbox2 checkbox chart-style" style="background-color: #555555;" data-name="fengge"
                 data-value="theme-white"></div>
          </div>
        </div>
      </div>
    </div>
  </div>
  <div id="tip">
    <div class="mask"></div>
    <div class="content">
      <div class="list-item">
        <div class="text">设置</div>
        <div class="icon icon-shezhi"></div>
      </div>
      <div class="tip-text">
        您输入的生辰临近两个时辰的分界点，系统默认为你选用了真太阳时制进行排盘以提升准确度（以档案的北京时间自动转换）；如果想使用北京时间排盘，可以在设置中切换。
      </div>
      <div class="btn btn-ok">知道了</div>
    </div>
  </div>
</div>

<script src="https://oss.goddessxzns.com/static/live/js/jquery-1.11.3.min.js"></script>
<!--<script src="/static/jquery-3.1.1.min.js"></script>-->
<script>
    window.header = JSON.parse(`{$headers}`);
    window.app_type = header['app-type'];
    window.setting = JSON.parse(`{:json_encode($setting)}`);
    window.gong = JSON.parse(`{:json_encode($gong)}`);
    window.info = JSON.parse(`{:json_encode($info)}`);
    window.is_need_show_tip = parseInt(`{$is_need_show_tip}`);

    console.log('gong:', gong, 'info:', info, 'is_need_show_tip:', is_need_show_tip);
    if (localStorage.getItem('ziwei_show_tip') !== '1') {
        $('#tip').show();
        localStorage.setItem('ziwei_show_tip', '1')
    }

    function resizeWindow() {
        if ($(window).width() >= 750) {
            $('html').css({'font-size': '32px'});
        } else {
            $('html').css({'font-size': '4.267vw'});
        }
    }

    /**
     * 通用跳转
     * @param target
     * @param link
     */
    function commonJsToNative(target, link) {
        if (!target)
            return;
        switch (app_type) {
            case 'ios':
                window.webkit.messageHandlers.commonJsToNative.postMessage({
                    'target': target,
                    'link': link
                });
                break;
            case 'android':
                androidwebview.commonJsToNative(target, link)
                break;
            default:
                console.log('not ios or android')
                if ('link' === target) {
                    window.location.href = link
                }
        }
    }

    function resetIndex(index) {
        if (index > 11) {
            index -= 12;
        }
        return index;
    }

    /**
     * 提示信息
     * @param msg
     */
    function toast(msg) {
        var m = document.createElement('div');
        m.innerHTML = msg;
        m.style.cssText = 'color: #ffffff;background: rgba(0,0,0,0.7);width: 80%;line-height: 2.5rem;text-align: center;border-radius: 0.25rem;position: fixed;bottom: 15%;left: 50%;transform: translate(-50%, 0);z-index: 999999;font-size: 1rem;padding: 0 1rem;';
        document.body.appendChild(m);
        setTimeout(function () {
            document.body.removeChild(m);
        }, 2500);
    }

    function makeBenmingTableHtmlStr(gong, info) {
        var htmlStr = '';
        [5, 6, 7, 8, 4, 9, 3, 10, 2, 1, 0, 11].forEach(function (v) {
            // 每一行的开始宫位
            if ([2, 3, 4, 5].includes(v)) {
                htmlStr += '<tr class="tr">';
            }
            htmlStr += '<td class="td gong" id="gong-' + v + '" data-index="' + v + '" data-lu="' + gong[v]['hualu'] + '" data-quan="' + gong[v]['huaquan'] + '" data-ke="' + gong[v]['huake'] + '" data-ji="' + gong[v]['huaji'] + '">';
            htmlStr += '  <div class="xing">';
            gong[v]['xing'].forEach(function (v2) {
                htmlStr += '    <div id="xing-' + v2['id'] + '" class="star">';
                htmlStr += '      <span class="mingzi ' + v2['type'] + '" style="">' + v2['name'] + '</span>';
                htmlStr += '      <span class="zhuangtai">' + v2['zhuangtai'] + '</span>';
                if (v2['shengnian_sihua']) {
                    htmlStr += '      <span class="shegnniansihua cur">' + v2['shengnian_sihua'] + '</span>';
                } else {
                    htmlStr += '      <span class="shegnniansihua">' + v2['shengnian_sihua'] + '</span>';
                }
                if (v2['zihua_lu'] === 1) {
                    htmlStr += '      <span class="huaru zihua-lu"></span>';
                }
                if (v2['zihua_quan'] === 1) {
                    htmlStr += '      <span class="huaru zihua-quan"></span>';
                }
                if (v2['zihua_ke'] === 1) {
                    htmlStr += '      <span class="huaru zihua-ke"></span>';
                }
                if (v2['zihua_ji'] === 1) {
                    htmlStr += '      <span class="huaru zihua-ji"></span>';
                }

                if (v2['huadui_lu'] === 1) {
                    htmlStr += '      <span class="huaru huadui-lu"></span>';
                }
                if (v2['huadui_quan'] === 1) {
                    htmlStr += '      <span class="huaru huadui-quan"></span>';
                }
                if (v2['huadui_ke'] === 1) {
                    htmlStr += '      <span class="huaru huadui-ke"></span>';
                }
                if (v2['huadui_ji'] === 1) {
                    htmlStr += '      <span class="huaru huadui-ji"></span>';
                }
                htmlStr += '    </div>';
            })
            htmlStr += '  </div>';
            htmlStr += '  <div class="nian">' + gong[v]['nian'] + '</div>';
            if (gong[v]['shishengong'] === 1) {
                htmlStr += '  <div class="shishenggong">身宫</div>';
            }
            htmlStr += '  <div class="jichu">';
            htmlStr += '    <div class="qita">';
            // 太岁十二神
            htmlStr += '      <div class="qitaxing">' + gong[v]['boshi'] + '</div>';
            // 将前十二神
            htmlStr += '      <div class="qitaxing">' + gong[v]['jiangqian'] + '</div>';
            // 博士十二神
            htmlStr += '      <div class="qitaxing">' + gong[v]['taisui'] + '</div>';
            htmlStr += '    </div>';
            if (gong[v]['shixianzai']) {
                htmlStr += '    <div class="nianlingduan cur">' + gong[v]['nianlingduan'] + '</div>';
            } else {
                htmlStr += '    <div class="nianlingduan">' + gong[v]['nianlingduan'] + '</div>';
            }
            htmlStr += '    <div class="gongwei">' + gong[v]['mingcheng'] + '</div>';
            htmlStr += '    <div class="changsheng">' + gong[v]['changsheng'] + '</div>';
            htmlStr += '    <div class="gongganzhi">' + gong[v]['gan'] + gong[v]['zhi'] + '</div>';
            htmlStr += '  </div>';
            htmlStr += '</td>';

            if (v === 4) {
                htmlStr += '<td class="td" rowspan="2" colspan="2">';
                htmlStr += '  <div class="mid-list">';
                htmlStr += '    <div class="mid-list-item  geju">';
                htmlStr += '      <span class="lab"><span class="name">姓名：' + info['name'] + '</span>&nbsp;&nbsp;' + info['yinyang'] + ' ' + info['wuxingju'] + '</span>';
                htmlStr += '    </div>';
                // console.log('shijian0:', info['shijian0'])
                if (typeof info['shijian0']['name'] !== 'undefined') {
                    htmlStr += '    <div class="mid-list-item ztys">';
                    htmlStr += '      <span class="lab">' + info['shijian0']['name'] + '</span>';
                    htmlStr += '      <span class="text">' + info['shijian0']['value'] + '</span>';
                    htmlStr += '    </div>';
                }
                htmlStr += '    <div class="mid-list-item ztys">';
                htmlStr += '      <span class="lab">' + info['shijian']['name'] + '</span>';
                htmlStr += '      <span class="text">' + info['shijian']['value'] + '</span>';
                htmlStr += '    </div>';
                htmlStr += '    <div class="mid-list-item nongli">';
                htmlStr += '      <span class="lab">' + info['nongli']['name'] + '</span>';
                htmlStr += '      <span class="text">' + info['nongli']['value'] + '</span>';
                htmlStr += '    </div>';
                htmlStr += '    <div class="mid-list-item">';
                htmlStr += '      <span class="lab mingzhu">' + info['mingzhu']['name'] + '</span>';
                htmlStr += '      <span class="text">' + info['mingzhu']['value'] + '</span>';
                htmlStr += '      <span class="lab shenzhu">' + info['shenzhu']['name'] + '</span>';
                htmlStr += '      <span class="text">' + info['shenzhu']['value'] + '</span>';
                htmlStr += '      <span class="lab zidou">' + info['ziniandoujun']['name'] + '</span>';
                htmlStr += '      <span class="text">' + info['ziniandoujun']['value'] + '</span>';
                htmlStr += '    </div>';
                htmlStr += '    <div class="mid-list-item">';
                htmlStr += '      <span class="lab">本宫自化</span>';
                htmlStr += '      <span class="text icon icon-bgzh"></span>';
                htmlStr += '      <span class="lab">化入对宫</span>';
                htmlStr += '      <span class="text icon icon-dghr"></span>';
                htmlStr += '    </div>';
                htmlStr += '    <div class="mid-list-item">';
                htmlStr += '      <span class="lab ">四化颜色</span>';
                htmlStr += '      <span class="text">';
                htmlStr += '        <span class="lu"><span class="icon icon-right"></span>禄</span>';
                htmlStr += '        <span class="quan"><span class="icon icon-right"></span>权</span>';
                htmlStr += '        <span class="ke"><span class="icon icon-right"></span>科</span>';
                htmlStr += '        <span class="ji"><span class="icon icon-right"></span>忌</span>';
                htmlStr += '      </span>';
                htmlStr += '    </div>';
                htmlStr += '  </div>';
                htmlStr += '</td>';
            }
            // 每一行的结尾
            if ([8, 9, 10, 11].includes(v)) {
                htmlStr += '</tr>';
            }
        })
        $('#benming').html(htmlStr);
    }

    makeBenmingTableHtmlStr(gong, info);

    resizeWindow()

    // 查看参数列表
    $('#chart-detail').click(function () {
        // 调用本地跳转到新的webview
        commonJsToNative('link', '{$host}/web/ziwei/detail?rid={$rid}&need_auth=1');
    })

    // 打开设置弹窗
    $('#chart-setting').click(function () {
        $('#pop').show();
    })

    /**
     * 关闭设置页面
     */
    $('.mask,#pop .close').click(function () {
        $('#pop').hide();

        // 获取当前的所有设置
        var changed = 0, data = {};
        $('.input').each(function (k, v) {
            var name, val;
            // console.log('name:', name, 'value:', val)
            // 真太阳时、晚子时、飞星自化
            if ($(v).hasClass('radio')) {
                name = $(v).data('name');
                val = $(v).data('value');
                // console.log('name:', name, 'value:', val)
            } else if ($(v).hasClass('checkbox') && $(v).hasClass('checked')) {
                name = $(v).data('name');
                val = $(v).data('value');
                // console.log('name:', name, 'value:', val)
            }
            if (typeof name !== 'undefined' && typeof val !== 'undefined') {
                if (setting[name] !== val) {
                    changed++;
                    console.log('name:', name, 'value:', val)
                    setting[name] = val;
                }
            }
        })
        console.log('一共修改了' + changed + '个数据')
        if (changed > 0) {
            // 提交设置的数据
            $.ajax({
                url: '/web/ziwei/setting?rid={$rid}',
                type: 'POST',
                dataType: 'json',
                headers: header, // $headers
                data: setting,
                beforeSend: function () {
                    console.log('loading: beforeSend');
                },
                success: function (res) {
                    console.log('loading end')
                    console.log('success res:', res)
                    if (res.code === 200) {
                        toast('设置修改成功')
                        window.gong = res.data.gong;
                        window.info = res.data.info;
                        // 提交成功后，重载盘面数据
                        makeBenmingTableHtmlStr(gong, info);
                    } else {
                        toast('设置修改失败')
                    }
                },
                error: function (err) {
                    console.log('error err:', err)
                    toast('设置修改失败')
                },
            })
        }
    })

    $('.checkbox').click(function () {
        var obj = $(this);
        if (!obj.hasClass('checked')) {
            obj.addClass('checked').siblings('.checkbox').removeClass('checked');
            // 更换页面风格
            if (obj.hasClass('chart-style')) {
                $('.ziwei').attr('class', 'ziwei ' + obj.data('value'))
            }
        }

    })

    $('.radio').click(function () {
        var obj = $(this), val = parseInt(obj.data('value'));
        console.log('val: ', val);
        if (val === 0) {
            obj.addClass('checked').data('value', 1)
        } else {
            obj.removeClass('checked').data('value', 0)
        }
    })

    $('.ziwei').on('click', '.gong', function () {
        var obj = $(this),
            index = parseInt(obj.data('index')),
            lu = obj.data('lu'),
            quan = obj.data('quan'),
            ke = obj.data('ke'),
            ji = obj.data('ji');
        var isCur = obj.hasClass('cur');
        $('.mingzi').removeClass('cur-lu cur-quan cur-ke cur-ji');
        $('.gong').removeClass('cur other-cur');
        if (!isCur) {
            $('#xing-' + lu + ' .mingzi').addClass('cur-lu')
            $('#xing-' + quan + ' .mingzi').addClass('cur-quan')
            $('#xing-' + ke + ' .mingzi').addClass('cur-ke')
            $('#xing-' + ji + ' .mingzi').addClass('cur-ji')

            obj.addClass('cur');
            var index1 = resetIndex(index + 4);
            var index2 = resetIndex(index + 6);
            var index3 = resetIndex(index + 8);

            $('#gong-' + index1).addClass('other-cur');
            $('#gong-' + index2).addClass('other-cur');
            $('#gong-' + index3).addClass('other-cur');
        }
        return false;
    })

    $('#tip .btn-ok').click(function () {
        $('#tip').hide();
    })
</script>
</body>
</html>
